<template>
  <div class="calendar">
    <div class="week-header">
      <div
        class="day-header"
        v-for="(day, index) in dayOfWeek"
        :key="index">
        {{ day }}
      </div>
    </div>
    <div
      class="week"
      v-for="(week, weekIndex) in calendarWeeks"
      :key="weekIndex">
      <div
        v-for="(day, dayIndex) in week"
        :key="dayIndex"
        class="day"
        :title="day.name"
        :style="{ backgroundColor: day.bgColor }"
        :class="{ empty: day.value === undefined }">
        <span>{{ day.value !== undefined ? day.value : '' }}</span>
      </div>
    </div>
    <div class="week-footer">
      <div
        class="day-footer"
        v-for="(item, index) in dayOfWeekAverages"
        :key="index">
        <div class="footer-content">
          <div class="bar-box">
            <div
              class="bar"
              :style="{ height: maxValueOfAverageDay ? (+item.average / maxValueOfAverageDay) * 100 + '%' : '0', backgroundColor: item.bgColor }">
              <div class="bar-text">{{ item.average }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed, getCurrentInstance, onMounted, reactive, ref, watch } from 'vue'
  /* =============数据============== */
  const { proxy } = getCurrentInstance()
  const props = defineProps({
    chartData: {
      type: Object,
      default: []
    }
  })
  const calendarWeeks = ref([])
  const dayOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const dayOfWeekAverages = ref([])
  const maxValueOfAverageDay = computed(() => Math.max(...dayOfWeekAverages.value.map(item => item?.average || 0)))
  const maxValueOfEveryDay = computed(() => Math.max(...props.chartData.map(item => +item.value)))

  /* =============方法============== */
  const getDayOfWeekAverage = rawData => {
    let data = rawData.map(item => {
      if (item.dayOfWeek === 7) {
        item.dayOfWeek = 0
      }
      return item
    })
    dayOfWeekAverages.value = []
    for (let i = 0; i < 7; i++) {
      const dayValues = data.filter(item => item.dayOfWeek === i).map(item => item.value)
      const average = dayValues.length ? dayValues.reduce((a, b) => a + b, 0) / dayValues.length : 0
      let obj = {
        average: +average.toFixed(2)
      }
      dayOfWeekAverages.value.push(obj)
    }
    dayOfWeekAverages.value = dayOfWeekAverages.value.map(item => {
      item.bgColor = getBgColor(maxValueOfAverageDay.value, item.average)
      return item
    })
  }
  const findDate = date =>
    props.chartData.find((item, index) => {
      item.bgColor = getBgColor(maxValueOfEveryDay.value, item.value)
      return item.name === date
    })
  const getBgColor = (maxValue, data) => {
    if (maxValue === 0) {
      return '#2275F0'
    } else {
      if (data >= maxValue * 0.7) {
        return '#0C3B99'
      } else if (data >= maxValue * 0.3 && data < maxValue * 0.7) {
        return '#1555C2'
      } else {
        return '#2275F0'
      }
    }
  }
  const generateCalendar = (startDate, endDate) => {
    calendarWeeks.value = []
    const start = new Date(startDate)
    const end = new Date(endDate)
    let currentDate = new Date(start)
    let currentWeek = new Array(currentDate.getDay()).fill({})
    while (currentDate <= end) {
      currentWeek.push({
        ...findDate(currentDate.toISOString().slice(0, 10))
      })
      if (currentWeek.length === 7) {
        calendarWeeks.value.push(currentWeek)
        currentWeek = []
      }
      currentDate.setDate(currentDate.getDate() + 1)
    }
    if (currentWeek.length > 0) {
      while (currentWeek.length < 7) {
        currentWeek.push({})
      }
      calendarWeeks.value.push(currentWeek)
    }
  }
  watch(
    () => props.chartData,
    newVal => {
      if (newVal.length) {
        generateCalendar(newVal[0].name, newVal[newVal.length - 1].name)
        getDayOfWeekAverage(newVal)
      }
    },
    { deep: true, immediate: true }
  )
  onMounted(() => {})
</script>

<style scoped lang="scss">
  .calendar {
    display: table;
    width: 100%;
    border-collapse: collapse;
    color: #fff;
    @include computed_font(14);
    .week-header,
    .week,
    .week-footer {
      display: table-row;
    }
    .day {
      // background-color: #2275f0;
    }
    .week-body {
      max-height: pxTvh(240);
    }
    .day-header,
    .day,
    .day-footer {
      display: table-cell;
      border: 1px solid #3a5592;
      padding: pxTvh(10) pxTvw(10);
      box-sizing: border-box;
      text-align: center;
      width: 14.28%;
    }
    .day.empty {
      background-color: transparent;
      height: pxTvh(40);
    }
    .week-footer {
      & > .day-footer {
        border: none;
        height: pxTvh(150);
        .footer-content {
          height: 100%;
          display: flex;
          flex-direction: column;
          .bar-box {
            flex: 1;
            .bar {
              width: 50%;
              margin: 0 auto;
              height: 50%;
              background-color: #2275f0;
              position: relative;
              .bar-text {
                position: absolute;
                bottom: pxTvh(-24);
                left: 50%;
                transform: translateX(-50%);
              }
            }
          }
        }
      }
    }
  }
  // .calendar {
  //   display: flex;
  //   flex-direction: column;
  //   width: 100%;
  //   color: #fff;

  //   .week-header,
  //   .week,
  //   .week-footer {
  //     display: flex;
  //   }

  //   .day-header,
  //   .day,
  //   .day-footer {
  //     flex: 1;
  //     border: 1px solid #3a5592;
  //     padding: 10px;
  //     box-sizing: border-box;
  //     text-align: center;
  //   }

  //   .day {
  //     background-color: #2275f0;
  //   }

  //   .day.empty {
  //     background-color: transparent;
  //   }

  //   .week-footer {
  //     .day-footer {
  //       border: none;
  //       display: flex;
  //       flex-direction: column;
  //       justify-content: flex-end;

  //       .bar {
  //         width: 50%;
  //         margin: auto;
  //         background-color: #2275f0;
  //       }
  //     }
  //   }
  // }
</style>
